$(() => {
    //  处理后台传过来的数据
    function changeData(allData, firstRowData) {
        let result = [];
        for (let i = 0; i < allData[0].length; i++) {
            allData[0][i] = parseFloat(allData[0][i]);
        }
        for (let i = 1; i < firstRowData.length; i++) {     //  解析数据
            for (let j = 0; j < allData[0].length; j++) {
                let inData = [];
                inData.push((allData[0][j] * 100 / 3));     //  x轴坐标,0.03,0.06...变为1,2,...
                // inData.push(firstRowData[i]);    //  y轴坐标,第一行原始值
                inData.push(i - 1);     //  y轴坐标,0,1,2...
                if (allData[i][j] > 1 || allData[i][j] < 0) {   //  移除坏数据
                    allData[i][j] = null;
                }
                inData.push(allData[i][j]);     //  数据值
                result.push(inData);
            }
        }
        for (let i = 0; i < result.length; i++) {      //  交换xy坐标
            let temp;
            temp = result[i][0];
            result[i][0] = result[i][1];
            result[i][1] = temp;
        }
        return result;
    }

    //  路径获取
    function getContextPath() {
        let strPath = window.document.location.pathname;
        return strPath.substring(0, strPath.substr(1).indexOf('/') + 1);
    }

    let leftUpPicData = [];     //  左上热力图数据
    let leftDownPicData = [];   //  左下热力图数据

    //  选择文件绘图
    $("#firstSelect").change(function () {
        if ($(this).val() === "0") {
            $.ajax({
                type: "POST",
                url: getContextPath() + "/path",
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify({name: "b.csv"}),
                success(data) {
                    let jsonData = JSON.parse(data);
                    leftUpPicData = changeData(jsonData.allData, jsonData.firstRowData);
                    heatMapPic.setOption({
                        series: [{  //  左上图
                            data: leftUpPicData,
                        }, {  //  左下图

                        }]
                    });
                },
                error() {
                    console.log("fail");
                }
            });
        } else if ($(this).val() === "1") {
            $.ajax({
                type: "POST",
                url: getContextPath() + "/path",
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify({name: "c.csv"}),
                success(data) {
                    let jsonData = JSON.parse(data);
                    leftUpPicData = changeData(jsonData.allData, jsonData.firstRowData);
                    heatMapPic.setOption({
                        series: [{  //  左上图
                            data: leftUpPicData,
                        }, {  //  左下图

                        }]
                    });
                },
                error() {
                    console.log("fail");
                }
            });
        }
    });

    console.log(leftUpPicData);

    $("#secondSelect").change(function () {
        if ($(this).val() === "0") {
            $.ajax({
                type: "POST",
                url: getContextPath() + "/path",
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify({name: "b.csv"}),
                success(data) {
                    let jsonData = JSON.parse(data);
                    leftDownPicData = changeData(jsonData.allData, jsonData.firstRowData);
                    heatMapPic.setOption({
                        series: [{  //  左上图

                        }, {  //  左下图
                            data: leftDownPicData,
                        }]
                    });
                },
                error() {
                    console.log("fail");
                }
            });
        } else if ($(this).val() === "1") {
            $.ajax({
                type: "POST",
                url: getContextPath() + "/path",
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify({name: "c.csv"}),
                success(data) {
                    let jsonData = JSON.parse(data);
                    leftDownPicData = changeData(jsonData.allData, jsonData.firstRowData);
                    heatMapPic.setOption({
                        series: [{  //  左上图

                        }, {  //  左下图
                            data: leftDownPicData,
                        }]
                    });
                },
                error() {
                    console.log("fail");
                }
            });
        }
    });


    //  上传文件绘图
    /*layui.use('upload', () => {
        // 执行实例
        layui.upload.render({
            elem: '#load',      // 指向容器选择器，如：elem: '#id'。也可以是DOM对象。
            field: 'analysisDataFile',     // 设定文件域的字段名，默认值 "file"。
            url: getContextPath() + '/uploadAction/upload', // 服务端上传接口。
            method: "post",     // HTTP类型，默认post。
            data: {},           // 额外的参数，如：{id: 123, abc: 'xxx'}。
            accept: "file",     // 指定允许上传时校验的文件类型，可选值有：images（默认值）、file、video、audio。
            exts: "",           // 允许上传的文件后缀，默认值 "jpg|png|gif|bmp|jpeg"。
            auto: true,         // 是否选完文件后自动上传，默认值 true。
            size: 0,            // 设置文件最大可允许上传的大小，单位 KB，默认值 0（即不限制）。
            multiple: false,    // 是否允许多文件上传，默认值 false。
            number: 0,          // 设置同时可上传的文件数量，一般配合 multiple 参数出现，默认值 0（即不限制）。
            drag: false,        // 是否接受拖拽的文件上传，默认值 true。
            choose() {
                // 选择文件后的回调函数。
                layui.layer.open({
                    title: 'Loading',
                    btn: [],    // 不生成按钮
                    content: "<div id='uploadProcess'>Process：0%</div>"
                });
                // 将右上角“关闭按钮”隐藏
                $(".layui-layer-close1").hide();
            },
            before() {
                // 文件提交上传前的回调。
            },
            done(res, index, upload) {
                leftUpPicData = changeData(res.data.allData, res.data.firstRowData);
                heatMapPic.setOption({
                    series: [{  //  左上图
                        data: leftUpPicData,
                    }, {  //  左下图

                    }]
                });
                $(".layui-layer-close1").click();   //  关闭process对话框
            },
            error(index, upload) {
                layui.layer.open({
                    title: 'error',
                    content: "fail to upload"
                });
            }
        });

        layui.upload.render({
            elem: '#load1',      // 指向容器选择器，如：elem: '#id'。也可以是DOM对象。
            field: 'analysisDataFile',     // 设定文件域的字段名，默认值 "file"。
            url: getContextPath() + '/uploadAction/upload', // 服务端上传接口。
            method: "post",     // HTTP类型，默认post。
            data: {},           // 额外的参数，如：{id: 123, abc: 'xxx'}。
            accept: "file",     // 指定允许上传时校验的文件类型，可选值有：images（默认值）、file、video、audio。
            exts: "",           // 允许上传的文件后缀，默认值 "jpg|png|gif|bmp|jpeg"。
            auto: true,         // 是否选完文件后自动上传，默认值 true。
            size: 0,            // 设置文件最大可允许上传的大小，单位 KB，默认值 0（即不限制）。
            multiple: false,    // 是否允许多文件上传，默认值 false。
            number: 0,          // 设置同时可上传的文件数量，一般配合 multiple 参数出现，默认值 0（即不限制）。
            drag: false,        // 是否接受拖拽的文件上传，默认值 true。
            choose() {
                // 选择文件后的回调函数。
                layui.layer.open({
                    title: 'Loading',
                    btn: [],    // 不生成按钮
                    content: "<div id='uploadProcess'>Process：0%</div>"
                });
                // 将右上角“关闭按钮”隐藏
                $(".layui-layer-close1").hide();
            },
            before() {
                // 文件提交上传前的回调。
            },
            done(res, index, upload) {
                leftDownPicData = changeData(res.data.allData, res.data.firstRowData);
                heatMapPic.setOption({
                    series: [{  //  左上图

                    }, {  //  左下图
                        data: leftDownPicData,
                    }]
                });
                $(".layui-layer-close1").click();   //  关闭process对话框
            },
            error(index, upload) {
                layui.layer.open({
                    title: 'error',
                    content: "fail to upload"
                });
            }
        });
    });*/

    // 热力图
    let heatMapPic = echarts.init(document.getElementById('heatMap'));
    let linePic = echarts.init(document.getElementById('line'));

    let xData = [];
    let yData = [];
    //  x坐标
    for (let i = 0; i <= 136; i++) {
        xData.push(i);
    }
    //  y坐标
    for (let j = 0; j < 401; j++) {
        yData.push(j);
    }

    let firstPosition = 50;    //  markline的起始位置

    lineOption = {
        grid: [{    // 左上覆盖
            height: '30%',
            width: '35%',
            top: '3%'
        }, {    // 左下覆盖
            height: '30%',
            width: '35%',
            top: '40%'
        }, {    //  中下
            height: '23%',
            width: '75%',
            top: '74%'
        }, {    //  右上
            height: '30%',
            width: '35%',
            left: '50%',
            top: '3%'
        }, {    //  右上覆盖
            height: '30%',
            width: '35%',
            left: '50%',
            top: '3%'
        }, {    //  右下
            height: '30%',
            width: '35%',
            left: '50%',
            top: '40%'
        }, {    //  右下覆盖
            height: '30%',
            width: '35%',
            left: '50%',
            top: '40%'
        }],
        xAxis: [{   // 左上覆盖
            // show: false,
            type: 'category',
            data: xData,
            // max: 24,    //  刻度最多为12
            // splitNumber: 410,   //  把刻度分成410份
            gridIndex: 0,
            /*axisLabel: {
                // interval: 5,  //控制坐标轴刻度标签的显示间隔.设置成 0 强制显示所有标签。设置为 1，隔一个标签显示一个标签。设置为2，间隔2个标签。以此类推
                // color:'#f2f2f2',
            },*/
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            id: 'lineXPosition'
        }, {    // 左下覆盖
            // show: false,
            type: 'category',
            data: xData,
            // max: 12,    //  刻度最多为12
            // splitNumber: 410,   //  把刻度分成410份
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 1,
        }, {    //  中下
            type: 'category',
            data: yData,
            axisTick: {     // 刻度线
                show: false
            },
            axisLabel: {    //  刻度的数字
                show: false,
                //  自定义刻度
                /*formatter: function (value) {
                    var texts = [['201'],['a'],['b']];
                    // if (value > 0.1) {
                    //     texts.push('2017');
                    // } else if (value <= 1) {
                    //     texts.push('1005');
                    // }
                    return texts;
                }*/
            },
            axisLine: {     //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                },
                show: true
            },
            gridIndex: 2
        }, {    //  右上
            // show: false,
            type: 'value',
            splitLine: {    //  网格线
                lineStyle: {
                    type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                },
                show: false
            },
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 3
        }, {    //  右上覆盖
            show: false,
            type: 'value',
            gridIndex: 4
        }, {    //  右下
            type: 'value',
            min: 0,
            max: 1,
            splitLine: {    //  网格线
                lineStyle: {
                    type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                },
                show: false
            },
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 5
        }, {    //  右下覆盖
            show: false,
            type: 'value',
            gridIndex: 6
        }],
        yAxis: [{   // 左上覆盖
            // show: false,
            type: 'category',
            data: yData,
            gridIndex: 0,
            max: 12,
            // splitNumber: 24,
            // axisLabel: {
            //     interval: 20,   //  隔20个显示一个坐标
            // },
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            id: 'lineXPosition'
        }, {    // 左下覆盖
            // show: false,
            type: 'category',
            data: yData,
            max: 12,
            // splitNumber: 410,
            // axisLabel: {
            //     interval: 20,   //  隔20个显示一个坐标
            // },
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 1
        }, {    //  中下
            type: 'value',
            min: -1,
            max: 1,
            splitLine: {    //  网格线
                lineStyle: {
                    type: 'dashed'    //设置网格线类型 虚线/实线
                },
                show: true
            },
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 2
        }, {    //  右上
            show: false,
            type: 'category',
            data: yData,
            gridIndex: 3
        }, {    //  右上覆盖
            type: 'category',
            data: yData,
            max: 12,
            splitLine: {    //  网格线
                lineStyle: {
                    type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                },
                show: true
            },
            // axisLabel: {
            //     interval: 20,   //  隔20个显示一个坐标
            // },
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 4
        }, {    //  右下
            show:false,
            type: 'category',
            data: yData,
            gridIndex: 5
        }, {    //  右下覆盖
            type: 'category',
            data: yData,
            max: 12,
            splitLine: {    //  网格线
                lineStyle: {
                    type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                },
                show: true
            }, lineStyle: {
                type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
            },
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 6
        }],
        series: [{
            data: [],
            type: 'line',
            markLine: {
                symbol: 'none',
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        lineStyle: {
                            type: 'solid',
                            color: '#333 ',
                            width: 2,
                        },
                        label: {
                            textStyle: {
                                color: '#fff',
                                fontSize: 16,
                                fontWeight: "bolder",
                            },
                        }
                    },
                },
                data: [
                    {xAxis: firstPosition},
                ],
            }
        }, {
            data: [],
            type: 'line',
            markLine: {
                symbol: 'none',
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        lineStyle: {    //  线样式
                            type: 'solid',
                            color: '#333 ',
                            width: 2,
                        },
                        label: {    // 线上面文字样式
                            textStyle: {
                                color: '#fff',
                                fontSize: 16,
                                fontWeight: "bolder",
                            },
                        }
                    },
                },
                data: [
                    {xAxis: firstPosition},
                ],
            },
            xAxisIndex: 1,
            yAxisIndex: 1
        }, {
            data: [],
            type: 'line',
            xAxisIndex: 2,
            yAxisIndex: 2
        }, {
            data: [],
            type: 'line',
            xAxisIndex: 3,
            yAxisIndex: 3
        }, {
            data: [],
            type: 'line',
            xAxisIndex: 4,
            yAxisIndex: 4
        }, {
            data: [],
            type: 'line',
            xAxisIndex: 5,
            yAxisIndex: 5
        }, {
            data: [],
            type: 'line',
            xAxisIndex: 6,
            yAxisIndex: 6
        }]
    };

    linePic.setOption(lineOption);

    heatMapOption = {
        tooltip: {},
        grid: [{    //  左上
            height: '30%',
            width: '35%',
            top: '3%'
        }, {    //  左下
            height: '30%',
            width: '35%',
            top: '40%',
        }],
        xAxis: [{   //  左上
            show: false,
            type: 'category',
            data: xData,
            /*max: 12,
            splitNumber: 410,*/
            gridIndex: 0,
            // axisLabel:{
            //     interval: 5,  //控制坐标轴刻度标签的显示间隔.设置成 0 强制显示所有标签。设置为 1，隔一个标签显示一个标签。设置为2，间隔2个标签。以此类推
            // },
            id: 'heatMap'
        }, {   //  左下
            show: false,
            type: 'category',
            data: xData,
            /*max: 12,
            splitNumber: 410,*/
            gridIndex: 1,
            id: 'heatMap1'
        }],
        yAxis: [{
            show: false,
            type: 'category',
            data: yData,
            gridIndex: 0,
            // max: 12,
            // splitNumber: 410,
            axisLabel: {
                interval: 20,   //  隔20个显示一个坐标
            },
            id: 'heatMap'
        }, {
            show: false,
            type: 'category',
            data: yData,
            // max: 12,
            // splitNumber: 410,
            axisLabel: {
                interval: 20,   //  隔20个显示一个坐标
            },
            gridIndex: 1,
            id: 'heatMap1'
        }],
        visualMap: [{
            min: 0,
            max: 1,
            itemHeight: 590,
            calculable: false,  //  控制拖动
            realtime: false,
            text: ['1', '-1'],
            textStyle: {
                color: '#fff'
            },
            inRange: {
                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            },
            top: '0%',
            // seriesIndex: '0'
        },/* {
            min: 0,
            max: 1,
            calculable: true,
            realtime: false,
            inRange: {
                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            },
            top: '45%',
            left: '1%',
            // seriesIndex: '1'
        }*/],
        series: [{  //  左上图
            name: 'Gaussian',
            type: 'heatmap',
            // data: demoData,
            data: [],
            //  标识线
            emphasis: {
                itemStyle: {
                    borderColor: '#333',
                    borderWidth: 1
                }
            },
            progressive: 1000,
            animation: false,
            // seriesIndex: '0'
        }, {  //  左下图
            name: 'Gaussian',
            type: 'heatmap',
            data: [],
            //  标识线
            emphasis: {
                itemStyle: {
                    borderColor: '#333',
                    borderWidth: 1
                }
            },
            progressive: 1000,
            animation: false,
            xAxisIndex: 1,
            yAxisIndex: 1,
            // seriesIndex: '1'
        }]
    };

    heatMapPic.setOption(heatMapOption);

//  拖动线
    linePic.setOption({
        graphic: {
            type: 'rect',
            z: 100,
            shape: {
                width: 0,
                height: 680
            },
            // position: [linePic.convertToPixel({xAxisId: 'lineXPosition'}, firstPosition), 0],
            position: [heatMapPic.convertToPixel({xAxisId: 'heatMap'}, firstPosition), 0],
            draggable: true,
            style: {
                fill: 'rgba(0,0,0,0.3)',
                stroke: 'rgba(0,0,0,0.1)',
                lineWidth: 10
            },
            cursor: 'move',
            ondrag: onPointDragging
        },
    });

    let firstData = heatMapOption.series[0].data;   // 左上热力图数据
    let secondData = heatMapOption.series[1].data;  //  左下热力图数据
    let firstLineData = [];     //  右上折线图数据
    let secondLineData = [];    //  右下折线图数据
    let thirdLineData = [];     //  中下折线图数据
    let movePosition;   //  移动后的位置
    let movePosition1;   //  移动后的位置


    function onPointDragging() {
        firstData = leftUpPicData;
        secondData = leftDownPicData;

        //阈值变动
        // movePosition = linePic.convertFromPixel({xAxisId: 'lineXPosition'}, this.position[0]);
        movePosition = heatMapPic.convertFromPixel({xAxisId: 'heatMap'}, this.position[0]);
        // movePosition1 = movePosition * 3 / 100;
        for (let i = 0; i < firstData.length; i++) {
            if (firstData.length > 0) {
                if (firstData[i][0] === movePosition) {
                    firstLineData.push(firstData[i][2]);
                }
            }
        }

        for (let i = 0; i < secondData.length; i++) {
            if (secondData.length > 0) {
                if (secondData[i][0] === movePosition) {
                    secondLineData.push(secondData[i][2]);
                }
            }
        }

        if (firstData.length > 0 && secondData.length > 0) {
            for (let i = 0; i < secondData.length; i++) {
                if (secondData[i][0] === movePosition) {
                    thirdLineData.push(secondData[i][2] - firstData[i][2]);
                }
            }
        }

        linePic.setOption({
            series: [{
                markLine: {
                    data: [{xAxis: movePosition}],
                }
            }, {
                markLine: {
                    data: [{xAxis: movePosition}],
                }
            }, {
                type: 'line',
                data: thirdLineData,    //  中下
            }, {
                type: 'line',
                data: firstLineData,    //  右上
            }, {
                type: 'line',
                data: [],    //  右上覆盖
            }, {
                type: 'line',
                data: secondLineData,   //  右下
            }, {
                type: 'line',
                data: [],   //  右下覆盖
            }]
        });

        firstLineData.length = 0;
        secondLineData.length = 0;
        thirdLineData.length = 0;
    }
});